<template>
    <div>
        <header>
            <div class="personContainer">
                <div class="headerOver">
                    <router-link to="/">
                        <img class="logo" src="@/assets/images/logo4.png" alt="">
                    </router-link>

                    <div class="headerOne">
                    </div>
                    <div class="headerTwo">
                        <div class="twoLeft">
                            <a href="/index">
                                <img src="@/assets/images/home.png" alt="">
                                <span>平台首页</span>
                            </a>
                            <el-divider direction="vertical"></el-divider>
                            <el-dropdown @command="handleCommand">
                                <span style="position: relative;">
                                    <img class="avatarImg" v-if="userInfo.avatar" width="28" :src="userInfo.avatar" alt="">
                                    <img v-if="userInfo.serveExpert=='1'" class="tipImg" width="12" src="@/assets/img/vip.png" alt="">
                                </span>
                                
                                <span>{{ userInfo.nickName }}</span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item command="5">退出登录</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </div>
                        <div class="twoLine">
                            <img src="@/assets/images/msg.png" alt="">
                            <p>当前有：<span> {{ total2 }} </span>条消息提醒</p>
                        </div>
                    </div>
                </div>

            </div>
        </header>
        <img width="100%" src="@/assets/images/topBg.png" alt="">
    </div>
</template>
<script>
import { getMsgAll } from "@/request/api/msg"
import { logOut } from "@/request/api/login.js";
import { getUserInfo2 } from "@/request/api/user"
export default {
    data() {
        return {
            userInfo: {},
            total2: 0,
            params2: {
                page: 1,
                pageSize: 5,
                ifRead: null
            },
            // msgData2
        }
    },
    created() {
        this.getInfo()
        this.handleUnread()
    },
    methods: {
        getInfo() {
            getUserInfo2().then(res => {
                if (res.data.code === 200) {
                    this.userInfo = res.data.result
                    window.sessionStorage.setItem(
                      "userInfo",
                      JSON.stringify(this.userInfo)
                    );
                }
            })
            // var userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"));
            // this.userInfo = userInfo
        },
        // 获取未读消息
        handleUnread() {
            this.isSelectAll = false
            this.isSelectUn = true
            this.params2.ifRead = '0'
            getMsgAll(this.params2).then(res => {
                if (res.data.code === 200) {
                    // this.msgData2 = res.data.result.items
                    this.total2 = res.data.result.total
                }
            })
        },
        // 右上角点击事件
        handleCommand(command) {
            if (command == "1") {
                this.$router.push("/msgCenter");
            } else if (command == "5") {
                this.getLogOut()
            }
        },
        // 退出登录
        getLogOut() {
            this.$confirm("是否确认退出登录?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                if (this.userInfo.staffType === '8') {
                    this.$socketApi.wsChat.close()
                    // 0        CONNECTING        连接尚未建立
                    // 1        OPEN            WebSocket的链接已经建立
                    // 2        CLOSING            连接正在关闭
                    // 3        CLOSED            连接已经关闭或不可用
                    // 判断状态为3表示已关闭
                    setTimeout(() => {
                        if (this.$socketApi.wsChat.readyState === 3) {
                            this.getOutResult()
                        }
                    }, 1000);

                } else {
                    this.getOutResult()
                }
            });
        },
        // 退出接口
        getOutResult() {
            logOut().then((res) => {
                if (res.data.code == 200) {
                    this.$message({
                        message: '退出成功！',
                        type: "success",
                    });
                    sessionStorage.clear();
                    this.$cookie.remove("access_token");
                    if (this.$route.path === "/login") {
                        location.reload();
                    } else {
                        this.$router.push("/login");
                    }
                } else {
                    this.$message.error(res.data.message);
                }
            });
        },
        // 跳转消息中心-未读
        hanldeTo() {
            this.$router.push('/msgCenter')
            window.sessionStorage.setItem("menuPath", '/msgCenter');
        },
    }
}
</script>
<style lang="less" scoped>
@import "./header.less";
</style>

